<template>
<div class="wbcontent">
  <div v-show="type==1" class="waterimagedisplay">
    <img src="../../../static/image/bg6401.png"  @click="chooseIndex(1)" :class="index==1?'waterimageselect':'waterimage'">
    <img src="../../../static/image/bg6402.png"  @click="chooseIndex(2)" :class="index==2?'waterimageselect':'waterimage'">
    <img src="../../../static/image/bg6403.png"  @click="chooseIndex(3)" :class="index==3?'waterimageselect':'waterimage'">
  </div>
  <div v-show="type==2" class="waterimagedisplay">
    <img src="../../../static/image/bg12801.png"  @click="chooseIndex(1)" :class="index==1?'waterimageselect':'waterimage'">
    <img src="../../../static/image/bg12802.png"  @click="chooseIndex(2)" :class="index==2?'waterimageselect':'waterimage'">
    <img src="../../../static/image/bg12803.png"  @click="chooseIndex(3)" :class="index==3?'waterimageselect':'waterimage'">
  </div>
  <div v-show="type==3" class="waterimagedisplay">
    <img src="../../../static/image/bg19201.png"  @click="chooseIndex(1)" :class="index==1?'waterimageselect':'waterimage'">
    <img src="../../../static/image/bg19202.png"  @click="chooseIndex(2)" :class="index==2?'waterimageselect':'waterimage'">
    <img src="../../../static/image/bg19203.png"  @click="chooseIndex(3)" :class="index==3?'waterimageselect':'waterimage'">
  </div>




  <div style="margin-left: 30px;margin-top: 30px">*****背景替换RGB色:默认100:100:100*****</div>

  <div class="waterimagedisplay">
    <Input placeholder="Red" v-model="red" style="width: 200px"></Input>
    <Input placeholder="Green" v-model="green" style="width: 200px"></Input>
    <Input placeholder="Blue" v-model="blue" style="width: 200px"></Input>
  </div>


</div>
</template>

<script>
    /*
    static/image/water6402.png
    */
    export default {
        name: "BG",
        data(){
          return{
              type:localStorage.getItem('resolutionType')?localStorage.getItem('resolutionType'):1,
              index:1,//默认选中第一个
              red:100,
              green:100,
              blue:100,
          }
        },
        methods:{
           chooseIndex(index){
             this.index = index;
           }
        }
    }
</script>

<style scoped>

  .waterimagedisplay{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .wbcontent{
    width: 100%;
    height: 300px;
    background:rgba(255,255,255,1);
    box-shadow:5px 7px 49px 5px rgba(44,137,234,0.13);

    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
  }

  .waterimage{
    width: 200px;
    height: 150px;
    border: 1px solid #eeeeee;
    margin-top: 20px;
  }

  .waterimageselect{
    width: 200px;
    height: 150px;
    border: 1px solid #3a98ff;
    margin-top: 20px;
  }

  .waterimage:hover{
    border: 1px solid #3a98ff;
  }

</style>
